<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo16</title>

    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        .light {
            color: black;
            background-color: aliceblue;
            width: 100%;
            height: 100%;
        }

        .dark {
            color: white;
            background-color: black;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

    <!-- <div class="box">classbox</div>
    <div id="id">id</div>
    <h3><span><input type="test"></span></h3> -->

    <!-- <button id="btn">此处点击</button> -->
    <!-- <div>
        <span>hello world</span>
        <span>hello world</span>
        </div> -->


    <!-- <img src="白黑.jpg" alt=" " title="栗子"> -->


    <!-- <input type="button" value="播放"> -->

    <!-- <input type="text" class="input" value="0" >
    <input type="button" class="add" value="点我加1" >
    <input type="button" class="subtract" value="点我减1" onclick="Subtract()"> -->

    <!-- 用户按下某个键时执行JavaScript -->
    <!-- <input type="text" onkeydown="myFunction()"><br> -->
    
    <!-- 用户释放键时执行JavaScript -->
    <!-- <input type="text" onkeyup="myOnkeyup()"> -->

    <!--  用户按下某个键时执行JavaScript(但不适用于所有的键，比如ESC ALT等等) -->
      <!-- <input type="text" onkeypress="myFunction()"> -->


    <!-- <input type="text" onkeydown="myFunction()" onkeyup="myOnkeyup()"> -->
    

    <!-- <input type="text" > -->
    
    <!-- <input type="checkbox" id="all">全都选择<br>
    <input type="checkbox" class="item">1<br>
    <input type="checkbox" class="item">2</br>
    <input type="checkbox" class="item">3</br>
    <input type="checkbox" class="item">4 </br> -->
        
    <!-- <div style="font-size: 20px;">div123456</div> -->

    
    <!-- <div class="light" onclick="changeStyle()">这是测试夜间模式和正常模式的代码<br>
    这是测试夜间模式和正常模式的代码<br>
    这是测试夜间模式和正常模式的代码<br>
    这是测试夜间模式和正常模式的代码<br>
    这是测试夜间模式和正常模式的代码</div> -->

    <div class="t">
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
        <div class="div4">4</div>
    </div>
    
</body>

<script>

    //创建节点
    let element = document.createElement('div');
    element.className='测试';
    element.innerHTML='测试创建节点';
    console.log(element);

    //插入节点1(尾插)
    //父节点调用appendChild方法
    let t = document.querySelector('.t');
    t.appendChild(element);

    

    //创建一个element1节点
    let element1 = document.createElement('div');
    element1.className='指定位置插入';
    element1.innerHTML='指定位置插入';


    //插入节点2(在指定位置之前插入) 
    //父节点调用insertBefore方法，第一参数为需要添加的新元素，第二个位置为需要添加在哪个节点之前
    let t1 = document.querySelector('.div1');
    let newnode = t.insertBefore(element1,t1);
    let t2 = document.querySelector('.div2');//对一个对象多次进行指定位置插入只有最后一个位置生效
    let newnode2 = t.insertBefore(element1,t2)

    element1.innerHTML="修改内容";


    //删除节点-
    //父节点调用，删除指定的子节点，但是内存中的子节点数据不会被立刻删除，还可以直接添加回来
    t.removeChild(element1);

    

    // function changeStyle() {
    //     let div = document.querySelector('div');
    //     console.log(div.className)

    //     if (div.className=='light') 
    //         div.className='dark';
    //     else div.className='light';
    // }

    
    //这种方式修改只影响到特定样式, 其他内联样式的值不变
    // let div = document.querySelector('div')
    // div.onclick=function() {
    //     let cur = parseInt(div.style.fontSize);

    //     cur += 50;

    //     //div.style.fontSize=cur + 'px';
    //     div.style.cssText = 'font-size:' + cur + 'px';

    // }

    // let all_element = document.querySelector('#all');
    // let item_element = document.querySelectorAll('.item');

    // //当点击全部选择的事件时，将所有的子事件的checked都进行选择
    // all_element.onclick = function () {
    //     for (let i = 0; i < item_element.length; i++) {
    //         item_element[i].checked = all_element.checked;
    //     }
    // }    

    // //当子事件的cheked被取消后，也应该判断此时全都选择的checked是否被取消了

    // for (let i = 0; i < item_element.length; i++) {
    //     item_element[i].onclick = function() {
    //         all_element.checked=checksItem(item_element);
    //     }
    // }

    // function checksItem(item_element) {
    //     for (let i = 0; i < item_element.length; i++) {
    //         if (!item_element[i].checked) return false;
    //     }
    //     return true;
    // }



    // let input_element = document.querySelector('input')

    // //如果使用onkeydown不区分按键的大小写
    // input_element.onkeydown=function a(event) {
    //     //console.log("onkeydown按下时触发的反应")
        
    //     //event是全局变量可以获取键盘上按下的信息
    //     let a = event.keyCode;
    //     // console.log(a);

    //     let b = String.fromCharCode(a);
    //     console.log('键盘上按下的按键' + b)

    //     //通过事件还可以判断一些键位是否被使用，比如shift
    //     if (event.shiftKey) {
    //         alert("shift");
    //     }
    // }

    //此时使用onkeypress区分按键的大小写
    // input_element.onkeypress=function a(event) {
    //     //console.log("onkeydown按下时触发的反应")
        
    //     //event是全局变量可以获取键盘上按下的信息
    //     let a = event.keyCode;
    //     // console.log(a);
        
    //     let b = String.fromCharCode(a);
    //     console.log('键盘上按下的按键' + b)
    // }

    // function myFunction() {
    //     console.log("onkeydown按下时触发的反应")
    // }

    // function myOnkeyup() {
    //     console.log('onkeyup');
    // }

    
//    function Add() {
//     let input_element= document.querySelector('.input');
//     input_element.value=parseInt(input_element.value) + 1;
//    }

    // let input_element=document.querySelector('.input')
    // let add_element = document.querySelector('.add');
    // add_element.onclick=function() {
    //     input_element.value=parseInt(input_element.value) + 1;
    // }

    // function Subtract() {
    //     input_element.value=parseInt(input_element.value) - 1;
    // }





    // let btn = document.querySelector('input');
    // btn.onclick = function() {
    //     if (btn.value=='播放') btn.value='暂停';
    //     else btn.value='播放';  
    // }



    // let e1 = document.querySelector('.box');
    // let e2 = document.querySelector('#id');
    // let e3 = document.querySelector("h3 span input");
    // console.log(e1);
    // console.log(e2);
    // console.log(e3);

    // let e4 = document.querySelectorAll('div');
    // console.log(e4);

    // let btn = document.querySelector('#btn');
    // btn.onclick = function() {
    //     alert('hello world');
    // }

    // var div = document.querySelector('div');
    // // 读取 div 内部内容
    // console.log(div.innerText);
    // // 修改 div 内部内容, 界面上就会同步修改
    // div.innerText = 'hello js <span>hello js</span>';


    // let div = document.querySelector('div');
    // //能看到div的内部结构和内容
    // console.log(div.innerHTML);
    // //修改div内部的内容
    // div.innerHTML='<span> hello js </span>';


    // let img = document.querySelector('img');
    // console.dir(img);
    // console.log(img.src);
    // console.log(img.alt)
    // console.log(img.title)

</script>

</html>